<template>
  <div>
    <div class="loginPart">
      <input v-model="searchName" placeholder="Search by time" type="text" />
      <table>
        <thead>
        <tr>
          <th>camera_id</th>
          <th>time</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in numberedFilteredList" :key="index">
          <td >{{ item.camera_id }}</td>

          <td >{{ item.time }}</td>

          <td>
            <button  @click="toggleEditMode(index)">
              查看监控视频
            </button>

          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { modifyWhiteList, showWhiteList,deleteWhiteList } from "@/api/InforManage";
import { showMonitorList, showTrackList } from "@/api/history";
const videoDialog = ref(null);
const videoPlayer = ref(null);
const list = ref([]);

const fetchData = async () => {
  try {
    const response = await showMonitorList();
    list.value = response.data.list.map(item => ({
      ...item,
      alarm: reactive({
        camera_id: item.camera_id,
        time: item.time,
        video: item.video,

      }),
    }));
  } catch (error) {
    console.error(error);
  }
};

const searchInput = ref("");
fetchData();

const filteredUsers = computed(() => {
  return list.value.filter(user => user.fields.time.includes(searchInput.value));
});

const searchName = ref("");
const filteredList = computed(() => {
  if (searchName.value === "") {
    return list.value;
  } else {
    return list.value.filter(item =>
        item.time.toLowerCase().includes(searchName.value.toLowerCase())
    );
  }
});

const numberedFilteredList = computed(() => {
  return filteredList.value.map((item, index) => ({
    ...item,
    index: index + 1,
  }));
});

function toggleEditMode(index) {

  const item = list.value[index];
  let addr = item.video;

}

</script>

<style scoped>
.loginPart {
  width: 80%;
  max-width: 800px;
  padding: 40px;
  background-color: #f1f1f1;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.table-container {
  width: 100%;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f2f2f2;
}

th,
td {
  padding: 10px;
  text-align: left;
}

th {
  background-color: #3498db;
  color: white;
}

td input[type="text"],
td input[type="number"],
td select {
  width: 100%;
  padding: 5px;
  border: none;
  border-radius: 3px;
  background-color: #eaf8ff;
}

td input[type="text"]:disabled,
td input[type="number"]:disabled,
td select:disabled {
  background-color: #f2f2f2;
}
</style>
